<template>
	<view class="container">
		
		<view class="tui-box-upload">
			<tui-upload :serverUrl="serverUrl" :header="ajaxHeader" fileKeyName="image" @complete="result" @remove="remove"></tui-upload>
		</view>
		<view class="tui-cells">
			<textarea class="tui-textarea" placeholder="添加备注信息" maxlength="500" placeholder-class="phcolor"
			 v-model="desc" />
			<view class="textarea-counter">{{descNum}}/500</view>
		</view> 
		<view class="mybtn">
			<tui-button type="danger" shape="circle" @click="save"> 保存</tui-button>
		</view>
	</view>
</template>

<script>
	//实际使用需要传入上传地址，以及上传接口返回数据进行调整组件
	export default {
		data() {
			return {
				osn:'',
				desc:'',
				serverUrl:this.tui.apiUrl('user/order/upload'),
				imageData: [],
				ajaxHeader:{},
				saveStatus:0,
			}
		},
		onLoad(opt){
			this.osn = opt.osn;
			// this.osn = 123456;
			this.ajaxHeader['Authorization']=this.tui.getToken();
		},
		onShow(){
			
		},
		computed:{
			descNum:function(){
				return this.desc.length
			},
		},
		methods: {
			result: function(e) {
				// console.log(e)
				this.imageData = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				// console.log(e)
				let index = e.index
			},
			save(){
				// console.log(this.imageData);
				// return;
				if(this.saveStatus){
					return;
				}
				this.saveStatus=1;
				this.tui.post('user/order/savepz',{img:this.imageData,desc:this.desc,osn:this.osn}).then(res=>{
					this.tui.toast(res.msg);
					if(res.code ==1){
						uni.reLaunch({
						    url: '/pages/index/index'
						});
					}else{
						this.saveStatus=0;
					}
					
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding: 20rpx 0 120rpx 0;
		box-sizing: border-box;
	}

	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}

	.tui-box-upload {
		padding-left: 25rpx;
		box-sizing: border-box;
	}
	.mybtn{padding: 5%;}
	.mybtn .tui-btn{
		box-shadow: 0px 3px 12px 0px #f96262;
	}
	
	.tui-cells {
	  border: 1rpx solid #e6e6e6;
	  border-radius: 4rpx;
	  height: 280rpx;
	  box-sizing: border-box;
	  padding: 20rpx 20rpx 0 20rpx;
	  margin: 30upx;
	}
	
	.tui-textarea {
	  height: 210rpx;
	  width: 100%;
	  color: #666;
	  font-size: 28rpx;
	}
	
	.pholder {
	  color: #ccc;
	}
	
	.textarea-counter {
	  font-size: 24rpx;
	  color: #999;
	  text-align: right;
	  height: 40rpx;
	  line-height: 40rpx;
	  padding-top: 4rpx;
	}
</style>
